<template>
    <div class="box">
        <h1>登录</h1>
        <el-form label-width="150px" :model="form" style="max-width: 460px">
            <el-form-item label="名户名：">
                <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码：" text="pass">
                <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script setup lang="ts">
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import router from '../router';
import service from "../utils/service"

const form = reactive({
    username: '',
    password: '',
})
const login = () => {
    service({
        url: "/admin/login",
        method: "POST",
        data: {
            adminname: form.username,
            password: form.password
        }
    }).then(res => {
        console.log(res);

        if (res.data.code === "200") {
            router.push("/Admin")
        }
        else if (res.data.code === "10005") {
            ElMessage({
                message: '账号未注册.',
                type: 'warning',
            })
        } else {
            ElMessage({
                message: '账号与密码不匹配',
                type: 'error',
            })
        }
    })
}

</script>

<style scoped >
.box {
    width: 500px;
    height: 400px;
    border: 1px solid gray;
    margin: 10% auto;
    background: url(https://img0.baidu.com/it/u=67587573,4207995713&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677430800&t=812fda39e917ba8cb8e5d28168c5d170) no-repeat;
}

h1 {
    margin: 10% 43%;
    color: #f97833;
}

.el-button {
    margin-left: 100px;
}
</style>